<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="icon" href="/img/favicon.png">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link id="layuicss-layer" rel="stylesheet" href="/layui/css/modules/layer/default/layer.css">
    <link id="layuicss-layuiAdmin" rel="stylesheet" href="/css/admin.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="/layui/lay/modules/layer.js" charset="UTF-8"></script>
    <script src="https://recaptcha.net/recaptcha/api.js?hl=zh-CN" async defer></script>
</head>

<body layadmin-themealias="default" class="layui-layout-body">
<div id="LAY_app" class="layadmin-tabspage-none">
    <link rel="stylesheet" href="/css/login.css" media="all">
    <div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
        <div class="layadmin-user-login-main">
            <div class="layadmin-user-login-box layadmin-user-login-header">
                <h2>IT Container</h2>
                <p>在线虚拟容器教学平台</p>
            </div>
            <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-userCode"></label>
                    <input type="text" name="userCode" id="LAY-user-login-userCode" lay-verify="required" placeholder="用户名" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
                    <input type="password" name="password" id="LAY-user-login-password" lay-verify="required" placeholder="密码" class="layui-input">
                </div>
                <div id='recaptcha' class="g-recaptcha"
                     data-sitekey="6LffnfQaAAAAAB2zKhl1oKcrLYwpSaClii0IPboM"
                     data-callback="onSubmit"
                     data-size="invisible">
                </div>
                <div class="layui-form-item">
                    <button id="admin-login-button" class="layui-btn layui-btn-fluid"  lay-filter="LAY-user-login-submit">登 录</button>
                </div>
                <div id="config" class="layui-form-item" style="margin-bottom: 20px;">
                    <a id="forget_password" class="layadmin-user-jump-change layadmin-link" style="margin-top: 7px;float: left">忘记密码</a>
                    <a href="/register" class="layadmin-user-jump-change layadmin-link" style="margin-top: 7px;">注册账号</a>
                </div>
            </div>
        </div>
        <div class="layui-trans layadmin-user-login-footer">
            <p>© 2021<a href="http://www.itstudio.club/itstudio" target="_blank">爱特工作室</a></p>
            <p><a href="http://www.beian.miit.gov.cn/">鲁ICP备18019527号-2</a></p>
        </div>
    </div>
</div>
<script src="/layui/layui.js"></script>
<style id="LAY_layadmin_theme">.layui-side-menu,.layadmin-pagetabs .layui-tab-title li:after,.layadmin-pagetabs .layui-tab-title li.layui-this:after,.layui-layer-admin .layui-layer-title,.layadmin-side-shrink .layui-side-menu .layui-nav>.layui-nav-item>.layui-nav-child{background-color:#20222A !important;}.layui-nav-tree .layui-this,.layui-nav-tree .layui-this>a,.layui-nav-tree .layui-nav-child dd.layui-this,.layui-nav-tree .layui-nav-child dd.layui-this a{background-color:#009688 !important;}.layui-layout-admin .layui-logo{background-color:#20222A !important;}</style>


<script>
    var onSubmit;

    layui.use(['jquery', 'form'], function(){
        var $ = layui.$, form = layui.form;
        form.render();

        onSubmit = function (token) {
            grecaptcha.reset();
            let load = layer.load(2);
            let userCode = document.getElementById("LAY-user-login-userCode").value;
            let password = document.getElementById("LAY-user-login-password").value;
            let data = {
                username: userCode,
                password: password,
                token: token
            };
            $.ajax({
                url:        '/login',
                data:       data,
                type:       'POST',
                complete    :function (result) {
                    layer.close(load);
                    result = result.responseJSON;
                    let status = result.status;
                    if (status !== 200){
                        showMsg(result.message);
                    }else {
                        window.location = "/login/toIndex";
                    }
                }
            })
        }

        $('#admin-login-button').click(function () {
            if (!valid()) return;

            let token = grecaptcha.getResponse()
            if (token === "") {
                grecaptcha.execute();
            }else {
                onSubmit(token);
            }
        });

        function valid() {
            var userCode = document.getElementById("LAY-user-login-userCode").value;
            var password = document.getElementById("LAY-user-login-password").value;
            if (userCode == null || userCode == ""){
                showMsg("请填写用户名");
                return false;
            }
            if (password == null || password === "") {
                showMsg("请填写密码");
                return false;
            }
            return true;
        }

        //显示结果
        function showMsg(text) {
            layer.msg("<div style=\"padding: 20px 100px;\">"+ text + "</div>", {
                time: 8000, //8s后自动关闭
                btn: ['明白了'],
                shade: 0.3,
                yes: function (index, layero) {
                    layer.closeAll();
                }
            });
        }

        // 忘记密码
        $('#forget_password').click(function (){
            showMsg("请联系管理员重置密码")
        })
    })
</script>

</body>
</html>